<template>
  <div class="content">
    <div class="top">
      <div class="title">
        <img src="@/assets/img/JKELOGO.png" alt="" />
        即刻智造
      </div>
      <p class="tip">您的系统使用权限不足，请联系运维人员处理！</p>
      <p class="iphone">（即刻智能：0551-xxxxxxx）</p>
    </div>
    <div class="bottom">
      <a-upload name="file" :show-upload-list="false" accept=".lic" :before-upload="beforeUpload">
        <template>
          <div class="selectInput">
            {{ !file ? '请选择格式为.lic的授权文件' : file.name }}
          </div>
        </template>
      </a-upload>
      <div class="uploadBtn" @click="handleUpload">上传</div>
    </div>

    <p class="beian">Copyright@2020 安徽即刻智能科技有限公司 皖 ICP 备15006424号-3</p>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { fileBaseUrl } from '@/utils/request'
import axios from 'axios'
export default {
  name: 'uploadLicense',
  data() {
    return {
      uploadAction: '',
      headers: {},
      bizPath: 'temp',
      returnUrl: true,
      file: null,
    }
  },
  created() {
    let prefix = '/jksaas-mgt/mgt'
    this.uploadAction = fileBaseUrl + prefix + '/sys/common/uploadLicense'
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
  },
  methods: {
    handleUpload() {
      if (!this.file) {
        Vue.prototype.$Jnotification.error({
          message: '系统提示',
          description: '请先上传凭证文件！',
          duration: 4,
        })
        return
      }
      const formData = new FormData()

      formData.append('file', this.file)
      formData.append('bizPath', 'temp')

      axios({
        url: this.uploadAction,
        method: 'post',
        data: formData,
        headers: this.headers,
      }).then((res) => {
        if (res.data.code == 200) {
          Vue.prototype.$Jnotification.success({
            message: '系统提示',
            description: '上传成功',
            duration: 4,
          })
          this.$router.push('/')
        }
      })
    },
    beforeUpload(file) {
      this.file = file
      return false
    },
  },
}
</script>

<style lang="less" scoped>
.beian {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}
.content {
  width: 100vw;
  height: 100vh;
  background: #eee;
}
.top {
  padding: 20px;
  width: 100%;
  height: 400px;
  background: #1890ff;
}
.bottom {
  width: 100vw;
  height: 300px;
  background: #fff;
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
::-webkit-scrollbar {
  width: 0px;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  height: 100px;
  color: #fff;
  img {
    vertical-align: middle;
    margin-right: 20px;
  }
}
.tip {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.iphone {
  font-size: 30px;
  color: #fff;
  text-align: center;
}
.uploadBtn {
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: #1890ff;
  border-radius: 2px !important;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 50px;
}
.selectInput {
  cursor: pointer;
  width: 800px;
  height: 50px;
  background: #eee;
  line-height: 50px;
  font-size: 16px;
  color: #999;
  padding-left: 20px;
  margin-right: 20px;
}
</style>
